<template>
  <div id="app">
    <!--工单的车主信息 -->
    <div class="workMsg">
      <div class="workMsgnum">
        <span>订单号：{{ larborOrder.orderNo }}</span>
      </div>
      <div class="workMsglicense">
        <span>车牌号</span>
        <span>{{ larborOrder.plateNum }}</span>
      </div>
      <div class="workMsglicense">
        <span>客户名字</span>
        <span>{{ larborOrder.customerName }}</span>
        <img v-show="larborOrder.isThereVip != 0" src="../../assets/images/VIP@2x.png" />
      </div>
      <div class="workMsglicense">
        <span>客户手机</span>

        <span>{{ larborOrder.customerPhone }}</span>
      </div>
      <div class="workMsglicense">
        <span>当前公里数</span>
        <span>{{ larborOrder.mileage||0 }}</span>
        <span class="worlKM"> KM</span>
      </div>
    </div>
    <!-- 支付明细 -->
    <div class="payment">
      <div class="paymentDetail">
        <span>
          支付明细
        </span>
      </div>
      <div class="paymentMoney" v-if="larborOrder.payType">
        <span>{{larborOrder.payType==1?'现金':(larborOrder.payType==2?'微信':(larborOrder.payType==3?'支付宝':(larborOrder.payType==4?'支付宝转账':(larborOrder.payType==5?'微信转账':(larborOrder.payType==6?'刷卡':'挂账')))))}}</span>
        <span>￥{{ larborOrder.payAmount }}</span>
      </div>
<!--      <div class="paymentMoney">
        <span>现金支付</span>
        <span>￥{{ list.settleaccounts.cashPayMoney }}</span>
      </div>
      <div class="paymentMoney">
        <span>银行卡支付</span>
        <span>￥{{ list.settleaccounts.swipecardPayMoney }}</span>
      </div>
      <div class="paymentMoney">
        <span>支付宝转账支付</span>
        <span>￥{{ list.settleaccounts.aliTransferPayMoney }}</span>
      </div>
      <div class="paymentMoney">
        <span>微信转账支付</span>
        <span>￥{{ list.settleaccounts.wechatTransferPayMoney }}</span>
      </div> -->
      
    </div>
    <!-- 工单消费明细 -->
    <div class="consume"  v-if="larborOrder.orderGoods.length!=0">
      <div class="consumeDetail">
        <div class="consumeTitle">
          <div style="margin-bottom: 30px;">消费明细</div>
					<div class="paymentMoney" v-if="larborOrder.payType" v-for='(item,index) in larborOrder.orderGoods' :key='index'>
						<div style="display: flex;">
							<div>{{item.goodsName}}</div>
							<div>*{{ item.quantity }}</div>
						</div>
						<div>¥{{item.salePrice}}</div>
					</div>
        </div>
      </div>
    </div>
    
    <!-- 基础信息 -->
    <div class="basics">
      <div class="basicsMsg">
        <span>基础信息</span>
      </div>
      <div class="basicsMan">
        <span>操作人员</span>
        <span>{{ larborOrder.employeeName  }}</span>
      </div>
      <div class="basicsMan">
        <span>完成时间</span>
        <span>{{ larborOrder.updateTime }}</span>
      </div>
      <div class="basicsMan">
        <span>
          备注
        </span>
        <span>
          {{larborOrder.additionalRemarks||'无' }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      larborOrder:'',//订单信息
      list:{
        settleaccounts:{
         swipecardPayMoney:"加载中···",
          cashPayMoney:"加载中···",
          wechatAliPay:"加载中···",
          wechatTransferPayMoney:"加载中···",
          aliTransferPayMoney:"加载中···",
        },
        laborGoodsVoList:[]
      }
    };
  },
  methods: {},
  created() {
    this.orderType = this.$route.query.orderType;
		let params = {
			orderNo: this.$route.query.orderNo,
			merchantCode: localStorage.getItem('merchantCode'),
		}
		this.$api.detail(params).then(res=>{
			// res.data.map(val => {
			// 	val.payType
			// })
				this.larborOrder=res.data
		})

  },
  computed: {
    serveList(){
      return this.list.laborGoodsVoList.filter(item=>{
        return item.type == 1
      })
    },
    goodsList(){
      return this.list.laborGoodsVoList.filter(item=>{
        return item.type == 2
      })
    }
  },
};
</script>
<style scoped>
/* 工单车主信息样式 */
.workMsg {
  background-color: white;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  padding: 0 24px;
}
.workMsgnum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px 0 44px 0;
}
.workMsgnum :nth-child(1) {
  color: #272727;
  font-size: 32px;
}
.workMsgnum :nth-child(2) {
  color: #737373;
  font-size: 26px;
}
.workMsglicense {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 30px;
  font-size: 28px;
  color: #737373;
}
.workMsglicense :nth-child(1) {
  width: 210px;
  overflow: hidden;
  white-space: nowrap;
  /* display: inline-block; */
}
/* .workMsglicense :nth-child(2) {
} */
.workMsglicense img {
  width: 34px;
  height: 32px;
  margin-left: 20px;
}
.workMsg .workMsglicense:last-of-type{
  margin-bottom: 40px;
}
/* 工单支付明细样式 */
.payment {
  /* width: 95%;
  height: 100%;
  margin: 0 auto;
  border-radius: 1.2rem; */
   /* display: flex; */
  /* flex-direction: column;
  justify-content: space-evenly; */
  background-color: white;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  padding: 0 24px;
}
.paymentDetail {
  color: #272727;
  font-size: 32px;
  margin: 40px 0 44px 0;
}
.paymentMoney {
  /* width: 93%;
  height: 3rem;
  margin: 0 auto;
  font-size: 1.1rem; */
  margin-bottom:30px ;
  font-size: 28px;
  color: #737373;
	display: flex;
	justify-content: space-between;
}
/* 消费明细样式 */
.consume {
  /* background-color: white;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  padding: 0 24px; */
   background-color: white;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  padding: 40px 24px 10px 24px;
}
.consume:nth-of-type(1){
  padding-bottom: 0;
}
.consumeDetail {
  /* width: 93%;
  height: 50%;
  margin: 0 auto; */
  border-bottom: 1px dashed #cdcdcd;
}
.consumeDetailB {
  /* width: 93%;
  height: 50%;
  margin: 0 auto;
  padding-bottom: 0.8rem; */
}
.consumeDetailB .consumeTable{
  margin-bottom: 16px;
}
.consumeTitle {
  /* width: 100%;
  height: 2rem;
  line-height: 3rem;
  font-size: 1.3rem; */
  font-size: 32px;
  color: #272727;
}
.consumeTable {
  width: 100%;
  /* margin: 0.4rem auto; */
  /* margin: 44px 0 30px 0; */
  font-size: 28px;
  border-spacing: 0 6px;
  margin: 20px 0 26px 0;
}
.consumeTable td {
  /* width: 33.3%;
   overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  width: 33.3%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom:30px;
}
.consumeTable th {
  color: #737373;
  width: 33.3%;
}
.consumeTable tr {
  /* height: 58px;
  text-align: center;
  color: black; */
  height: 58px;
  text-align: center;
  color: black;
  width: 100%;
}
/* 基础信息 */
.basics {
  /* width: 95%;
  background-color: white;
  border-radius: 1.3rem;
  margin: 0 auto 3rem auto; */
  background-color: white;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 20px;
  padding: 40px 24px 10px 24px;
}
.basicsMsg {
  width: 100%;
  font-size: 32px;
  margin-bottom: 44px;
}
.basicsMan {
  font-size: 28px;
  color: #737373;
  margin-bottom: 30px;
}
.basicsMan :nth-child(1) {
  width: 210px;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
}
/* .worlKM {
  margin-left: 0.5rem;
} */
</style>
